<template>
  <div id="app">
    <Navbar></Navbar>
    <!-- <Footer></Footer> -->
    <!-- <transition :name="transitionName">
    </transition> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: "",
    };
  },

  // watch: {
  //   //使用watch 监听$router的变化
  //   $route(to, from) {
  //     //如果to索引大于from索引,判断为前进状态,反之则为后退状态
  //     if (to.meta.index > from.meta.index) {
  //       //设置动画名称
  //       this.transitionName = "slide-left";
  //     } else {
  //       this.transitionName = "slide-right";
  //     }
  //   },
  // },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #eae7e3;
  height: 100%;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
